<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.test {
  background: red;
}

</style>
<template>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
    <FormItem label="类型" prop="useType">
      <Select v-model="formValidate.useType" style="width:100%;" :transfer="true">
        <Option v-for="(item,index) in deviceTypes" :value="item.name" :key="'Type'+index">{{ item.name }}</Option>
      </Select>
    </FormItem>
    <FormItem label="型号" prop="model">
      <Input v-model="formValidate.model" placeholder="型号"></Input>
    </FormItem>
    <FormItem label="品牌" prop="brand">
      <Input v-model="formValidate.brand" placeholder="品牌"></Input>
    </FormItem>
    <FormItem label="协议" prop="prol">
      <Input v-model="formValidate.prol" placeholder="协议"></Input>
    </FormItem>
    <FormItem label="读取间隔" prop="readInterval" style="margin:0;">
      <Input v-model="formValidate.readInterval" placeholder="读取间隔"></Input>
    </FormItem>
    <!-- <FormItem>
      <Button type="primary" @click="handleSubmit('formValidate')">确定</Button>
      <Button type="primary" ghost @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
    </FormItem> -->
  </Form>
</template>
<script>
export default {
  created: function () {
    if (this.$store.state.selections.length !== 0) {
      this.deviceTypes = this.$store.state.selections['1003']
      this.deviceTypes.forEach((item)=>{
        console.info('----name:', item.name)
      })
      console.info('this.deviceTypes----', this.deviceTypes)
    }
  },
  data: function () {
    const num = (rule, value, callback) => {
      let isNum = /^\+?[1-9][0-9]*$/.test(value)
      if (value === '' || value === undefined || !isNum) {
        callback(new Error('请输入数字！'))
      } else {
        callback()
      }
    }
    return {
      editOneData: {},
      deviceTypes: [],
      formValidate: {
        useType: '',
        model: '',
        brand: '',
        readInterval: 1,
        prol: ''
      },
      ruleValidate: {
        useType: [{ required: true, message: '必填项！', trigger: 'blur' }, { required: true, message: '必填项！', trigger: 'change' }],
        model: [{ required: true, message: '必填项！', trigger: 'blur' }, { required: true, message: '必填项！', trigger: 'change' }],
        brand: [{ required: true, message: '必填项！', trigger: 'blur' }, { required: true, message: '必填项！', trigger: 'change' }],
        readInterval: [{ validator: num, trigger: 'blur' }, { validator: num, trigger: 'change' }],
        prol: [{ required: true, message: '必填项！', trigger: 'blur' }, { required: true, message: '必填项！', trigger: 'change' }]
      }
    }
  },
  methods: {
    handleSubmit: function (name) {
      let self = this
      self.$refs[name].validate((valid) => {
        if (valid) {
          // this.$Message.success('Success!')
          sessionStorage.typeDeviceInfo = true
          self.submitReady()
        } else {
          sessionStorage.typeDeviceInfo = ''
          self.$Message.error('Fail!')
        }
      })
    },
    handleReset: function (name) {
      this.$refs[name].resetFields()
    },
    // 重置form
    formReset: function () {
      this.$refs['formValidate'].resetFields()
    },
    // 更新formdata
    updateFormdata: function (data) {
      let self = this
      self.editOneData = JSON.parse(JSON.stringify(data))
      if (self.editOneData.id !== undefined) {
        self.formReset()
        self.formValidate = self.editOneData
      } else {
        self.formReset()
      }
    },
    // submitReady 准备
    submitReady: function () {
      let self = this
      if (sessionStorage.typeDeviceInfo && !sessionStorage.typeDeviceCollection) {
        // twoTab显示内容有误
        let chirldData = {
          tab: 'twoTab',
          objStr: JSON.stringify(self.formValidate)
        }
        self.$emit('showTab', chirldData)
        return
      }
      // 把数据推送到父组件
      let chirldData = {
        tab: 'oneTab',
        objStr: JSON.stringify(self.formValidate)
      }
      self.$emit('showTab', chirldData)
      // tab都正确
      if (sessionStorage.typeDeviceInfo && sessionStorage.typeDeviceCollection) {
        if (self.editOneData.id) {
          self.$emit('updSubmitReady')
        } else {
          self.$emit('saveSubmitReady')
        }
      }
    }
  }
}

</script>
